<script setup lang="ts">
import {
  Deployment,
  Pod,
  ReplicaSet
} from "@/views/domain/kubeHud/api/k8s/types";
import KContainer from "../../components/KContainer.vue";
import DeployReplicas from "../widgets/DeployReplicas.vue";
import DeployContainerPorts from "../widgets/DeployContainerPorts.vue";
import DeployContainerTable from "../widgets/DeployContainerTable.vue";
import { computed, ref, watch } from "vue";
import KPodList from "@/views/domain/kubeHud/views/k8s/pod/widgets/KPodList.vue";

type Prop = {
  deployment: Deployment;
  pods?: Pod[];
};

const props = defineProps<Prop>();

const currentDeploy = ref<Deployment>(props.deployment);
const currentPods = ref<Pod[]>(props.pods || []);

const podContainers = computed(() => {
  return currentPods.value?.flatMap(pod => pod.spec?.containers || []) || [];
});

watch(
  () => props.deployment,
  () => {
    currentDeploy.value = props.deployment;
  }
);

watch(
  () => props.pods,
  () => {
    currentPods.value = props.pods || [];
  }
);
</script>

<template>
  <div class="info-status">
    <KContainer>
      <DeployReplicas
        :active="currentDeploy.status?.availableReplicas"
        :replicas="currentDeploy.spec.replicas"
        scalable
      />
    </KContainer>

    <KContainer title="端口">
      <DeployContainerPorts :containers="podContainers" />
    </KContainer>

    <KContainer title="容器组">
      <KPodList :pods="currentPods" />
    </KContainer>
  </div>
</template>
<style lang="scss" scoped>
.info-status {
  display: flex;
  flex-direction: column;
  gap: 15px;
}
</style>
